<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拓扑图</title>
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.js"></script>
    <script src="jquery-3.2.1.js"></script>
    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div>
    视图选择:<select>
    <option>教育</option>
    <option>IM</option>
    <option>UC</option>
    <option>
        <button>添加新视图</button>
    </option>
</select>
    日志统计区间<input value="2017-01-01 00:00:00" readonly/>-<input value="2019-01-01 00:00:00" readonly/>
    <button>修改</button>
    <button>导入日志数据</button>
</div>
<div class="toobox" style="position: fixed;margin-top: 50px;margin-left: 24px;z-index: 100">
    <p>显示控制</p>
    <input type="checkbox">展示日志数据</input>
</div>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="chartDiv" style="width: 95%;height:90%;background-color: #F0F0F0;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('chartDiv'));

    function initChart(nodes, links, categories) {
        var option = {
            backgroundColor: "#F0F0F0",
            title: {
                text: "教育服务拓扑图",
                subtext: "点击查看报表",
                top: "top",
                left: "center",
                link: "http://www.baidu.com",
            },
            legend: [{
                selectedMode: 'false',
                bottom: 0,
                data: categories.map(function (c) {
                    return c.name;
                }),
                tooltip: {
                    show: false
                }
            }],
            toolbox: {
                show: true,
                feature: {
                    restore: {
                        show: true
                    },
                    saveAsImage: {
                        show: true
                    }
                }
            },
            tooltip: {
                show: true,
                alwaysShowContent: false,
                enterable: true,
                backgroundColor: "rgba(254,254,254,255)",
                borderWidth: 1,
                padding: 5,
                textStyle: {
                    fontSize: 16,
                    color: '#999'
                },
                formatter: function (params, ticket, callback) {
                    if (params && params.data && params.data.source && params.data.target) {
                        //连接线
                        var tip = [
                            "<a href='拓扑绘制.html' target='_blank'>",
                            "总请求:" + params.data.value + "<br/>",
                            "异常请求:" + params.data.errorCall + "<br/>",
                            "平均响应:100<br/></a>",
                            "<a href='qps.html'>QPS:500</a><br/>---------<br/>",
                            "<button>禁止依赖</button>"
                        ];
                        return tip.join("");
                    }
                    else {
                        //端点
                        var tip = [
                            "<a href='拓扑绘制.html' target='_blank'>服务标识：" + params.data.serviceID + "</a>",
                            "<a href='拓扑绘制.html' target='_blank'>运行状态</a>",
                            "<a href='拓扑绘制.html' target='_blank'>负荷情况</a>",
                            "<a href='拓扑绘制.html' target='_blank'>API文档</a>",
                        ];
                        return tip.join("<br/>");
                    }
                }
            },
            animation: false,
            series: [
                {
                    name: "服务拓扑",
                    type: "graph",
                    layout: "none",
                    legendHoverLink: true,
                    focusNodeAdjacency: true,
                    top: "center",
                    left: "center",
                    tooltip: {
                        show: true
                    },
                    force: {
                        //initLayout: "circular",
                        repulsion: 3000,
                        gravity: 0.1,
                        layoutAnimation: true
                    },
                    symbol: 'circle',
                    //symbolSize: [50, 25],
                    symbolSize: function (value, params) {
                        var rate = 1 + (value / 50);
                        return [40 * rate, 20 * rate];
                    },
                    label: {
                        normal: {
                            show: true
                        }
                    },
                    edgeSymbol: ["none", "arrow"],
                    //edgeSymbolSize: 5,
                    coordinateSystem: null,//坐标系统
                    data: nodes,
                    links: links,
                    categories: categories,
                    roam: true,//平移缩放

                }
            ]
        };
        myChart.setOption(option);
    }


    myChart.showLoading();
    $.get('serviceInfo.txt', function (sdatas) {
        myChart.hideLoading();
        initChart(sdatas.nodes.map(function (n) {
                var serviceID = n.name;
                var name = n.name;
                if (n.name.indexOf("监控") > -1) {
                    serviceID = "monitor";
                }
                else if (n.name.indexOf("课程") > -1) {
                    serviceID = n.name.replace("课程", "course");
                }
                else if (n.name.indexOf("个人中心") > -1) {
                    serviceID = n.name.replace("个人中心", "userCenter");
                }
                else if (n.name.indexOf("测评") > -1) {
                    serviceID = n.name.replace("测评", "assessment");
                }
                else if (n.name.indexOf("网关-VR教育") > -1) {
                    serviceID = n.name.replace("网关-VR教育", "gateway-VREducation");
                }
                else if (n.name.indexOf("网关-微服务") > -1) {
                    serviceID = n.name.replace("网关-微服务", "gateway-Microservice");
                }
                else if (n.name.indexOf("网关-101教育") > -1) {
                    serviceID = n.name.replace("网关-101教育", "gateway-101Education");
                }
                //                if (!(nameZh === name)) {
                //                    sdatas.links.forEach(function (t) {
                //                        if (t.source === nameZh) {
                //                            t.source = name;
                //                        }
                //                        if (t.target === nameZh) {
                //                            t.target = name;
                //                        }
                //                    });
                //                }
                return {
                    name: name,
                    serviceID: serviceID,
                    value: n.value,
                    category: n.category,
                    draggable: true,
                    x: n.x,
                    y: n.y
                };
            }),
            sdatas.links.map(function (l) {
                var width = 1;
                if (l.value > 0) {
                    width = 5 * ( l.value / 1000000);
                    if (width < 0.5) {
                        width = 0.5;
                    }
                }
                var symbolSize = width * 2;
                if (symbolSize < 5) {
                    symbolSize = 5;
                }
                var color = "#272727";
                var lineType = "solid";
                if (l.dependentType == 1 && l.value == 0) {
                    lineType = "dashed";
                }
                if (l.dependentType == -1 && l.value > 0) {
                    color = "#EA0000";
                }
                else if (l.dependentType == 1 && l.value > 0) {
                    color = "#006000";
                }
                else if (l.dependentType == 0 && l.value > 0) {
                    color = "#0000C6";
                }
                return {
                    source: l.source,
                    target: l.target,
                    lineStyle: {
                        normal: {
                            width: width,
                            color: color,
                            type: lineType,
                            symbolSize: symbolSize
                        }
                    },
                    value: l.value,
                    errorCall: l.errorCall,
                    avgTime: l.avgTime
                };
            }),
            sdatas.categories.map(function (c) {
                return {name: c};
            }));
    }, 'json');

</script>
</body>
</html>